import React, {
    Component,
} from 'react'
import {
    FlatList,
    View,
    StyleSheet,
    ActivityIndicator,
    Text
} from 'react-native'
import PropTypes from 'prop-types';
import {Toast} from "antd-mobile-rn/lib/index.native";

export const FlatListState = {
    IDLE: 0,
    LoadMore: 1,
    Refreshing: 2
};
export default class SyList extends Component {
    static propTypes = {
        refreshing: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
    };

    state = {
        listHeight: 0,
    };

    render() {
        var {ListEmptyComponent, ItemSeparatorComponent} = this.props;
        var refreshing = false;
        var emptyContent = null;
        var separatorComponent = null;
        if (ListEmptyComponent) {
            emptyContent = React.isValidElement(ListEmptyComponent) ? ListEmptyComponent : <ListEmptyComponent/>
        } else {
            emptyContent = <Text style={styles.emptyText}>暂无数据下拉刷新</Text>;
        }

        if (ItemSeparatorComponent) {
            separatorComponent = React.isValidElement(ItemSeparatorComponent) ? ItemSeparatorComponent :
                <ItemSeparatorComponent/>
        } else {
            separatorComponent = <View style={{height: 1, backgroundColor: '#D6D6D6'}}/>;
        }
        if (typeof this.props.refreshing === "number") {
            if (this.props.refreshing === FlatListState.Refreshing) {
                refreshing = true
            }
        } else if (typeof this.props.refreshing === "boolean") {
            refreshing = this.props.refreshing
        } else if (typeof this.props.refreshing !== "undefined") {
            refreshing = false
        }
        return <FlatList
            {...this.props}
            onLayout={(e) => {
                let height = e.nativeEvent.layout.height;
                if (this.state.listHeight < height) {
                    this.setState({listHeight: height})
                }
                if(this.props.onLayout)
                    this.props.onLayout(e);
            }
            }
            ListFooterComponent={this.renderFooter}
            onRefresh={this.onRefresh}
            onEndReached={this.onEndReached}
            refreshing={refreshing}
            onEndReachedThreshold={this.props.onEndReachedThreshold || 0.1}
            ItemSeparatorComponent={() => separatorComponent}
            keyExtractor={(item, index) => index.toString()}
            ListEmptyComponent={() => <View
                style={{
                    height: this.state.listHeight,
                    width: '100%',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>{emptyContent}</View>}
        />
    }

    onRefresh = () => {
        if ((typeof this.props.refreshing === "boolean" && !this.props.refreshing) ||
            typeof this.props.refreshing === "number" && this.props.refreshing !== FlatListState.LoadMore &&
            this.props.refreshing !== FlatListState.Refreshing
        ) {
            this.props.onRefresh && this.props.onRefresh()
        }

    };

    onEndReached = () => {
        // console.log(this.props.refreshing);
        // console.log(FlatListState.IDLE);
        if (typeof this.props.refreshing === "boolean" || this.props.data.length == 0) {
            return;
        }
        if (!this.props.pageSize) {
            return;
        }
        if (typeof this.props.refreshing !== "boolean" &&(this.props.refreshing === FlatListState.IDLE||this.props.refreshing === FlatListState.LoadMore)) {
            this.props.onEndReached && this.props.onEndReached()
        }
        if (!this.hasMoreData()) {
            Toast.info('^_^没有更多数据啦~', 1, null, true);
        }
    };

    hasMoreData=()=>{
        if (this.props.data.length % (this.props.pageSize * this.props.pageCurrent) !== 0) {
            if (this.props.pageCurrent > 1) {
                return false;
            }
        }
        return true;
    }


    renderFooter = () => {
        // let footer = null;
        // if (typeof this.props.refreshing !== "boolean" &&(this.props.refreshing === FlatListState.IDLE||this.props.refreshing === FlatListState.LoadMore)
        //     ) {
        //     footer = (
        //         <View style={styles.footerStyle}>
        //             <ActivityIndicator size="small" color="#888888"/>
        //             <Text style={styles.footerText}>数据加载中…</Text>
        //         </View>
        //     )
        // }
        // return footer;
        return <View/>;
    }
}

const styles = StyleSheet.create({
    footerStyle: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
        height: 44,
    },
    footerText: {
        fontSize: 14,
        color: '#555555',
        marginLeft: 7
    },
    emptyText: {
        fontSize: 17,
        color: '#666666'
    }
});
